<template>
  <view class="template-communique tn-safe-area-inset-bottom">
    <view :style="{ height: vuex_custom_bar_height + 'px' }" class="tn-navbg">
      <!-- 顶部自定义导航 -->
      <tn-nav-bar alpha customBack fixed>
        <view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
          <text class='icon tn-icon-left'></text>
          <text class='icon tn-icon-home-capsule-fill'></text>
        </view>
        <view class="tn-flex tn-flex-col-center tn-flex-row-center ">
          <text class="tn-text-bold tn-text-xl tn-color-black">官方公告</text>
        </view>
      </tn-nav-bar>
    </view>
    <!-- 内容 -->
    <view class="tn-flex tn-flex-direction-column tn-margin-top-sm tn-margin-bottom">
      <!-- 公告列表 -->

      <view v-for="(item, index) in announcements" :key="index" class="announcement-item"
        @click="viewAnnouncement(item)">
        <view class="announcement__content">
          <!-- 公告类型标签和日期 -->
          <view class="announcement__header">
            <view class="tag-type" :style="{
              backgroundColor: item.type === '重要' ? '#FF6B6B' : item.type === '通知' ? '#5D9CEC' : item.type === '活动' ? '#48CFAD' : '#FF6B6B',
              color: '#FFFFFF',
              padding: '4rpx 20rpx',
              display: 'inline-block',
              borderRadius: '8rpx',
              fontSize: '28rpx',
              minWidth: '80rpx',
              textAlign: 'center',
              lineHeight: '40rpx'
            }">
              {{ item.type }}
            </view>

            <view class="announcement__date" style="color: #9CA3AF;">
              {{ item.date }}
            </view>
          </view>


          <view class="announcement__title tn-margin-top-sm">
            {{ item.title }}
          </view>

          <!-- 公告内容摘要 -->
          <view class="announcement__desc tn-margin-top-sm tn-color-gray">
            {{ item.content }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
import { getNoticeList } from '@/api/index.js'

export default {
  name: 'Communique',
  mixins: [template_page_mixin],
  data() {
    console.log('公告页面data函数被调用');
    return {
      announcements: []
    }
  },
  created() {
    this.loadNotices()
  },
  methods: {
    async loadNotices() {
      try {
        const res = await getNoticeList({})
        const list = Array.isArray(res?.rows)
          ? res.rows
          : (Array.isArray(res) ? res : (res?.data?.records || res?.data?.rows || []))

        this.announcements = (list || []).map(item => ({
          type: item.type || item.noticeType || '重要',
          date: item.date || item.publishTime || item.createTime || '',
          title: item.title || item.noticeTitle || item.name || '',
          content: item.content || item.noticeContent || item.summary || item.remark || ''
        }))
      } catch (e) {
        this.announcements = []
      }
    },
    // 获取公告类型对应的样式类
    getTypeClass(type) {
      const typeClasses = {
        '重要': 'announcement__tag--important',
        '通知': 'announcement__tag--notice',
        '活动': 'announcement__tag--activity'
      }
      console.log('getTypeClass被调用，type值：', type, '返回样式类：', typeClasses[type] || '');
      return typeClasses[type] || ''
    },

    // 获取标签样式
    getTagStyle(type) {
      const bgColors = {
        '重要': '#FF6B6B',
        '通知': '#5D9CEC',
        '活动': '#48CFAD'
      }

      return {
        backgroundColor: bgColors[type] || '#FF6B6B',
        color: '#FFFFFF',
        padding: '4rpx 20rpx',
        display: 'inline-block',
        borderRadius: '8rpx',
        fontSize: '28rpx',
        minWidth: '80rpx',
        textAlign: 'center',
        lineHeight: '40rpx'
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.tn-custom-nav-bar__back {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 1000rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
  font-size: 18px;

  .icon {
    display: block;
    flex: 1;
    margin: auto;
    text-align: center;
  }

  &:before {
    content: " ";
    width: 1rpx;
    height: 110%;
    position: absolute;
    top: 22.5%;
    left: 0;
    right: 0;
    margin: auto;
    transform: scale(0.5);
    transform-origin: 0 0;
    pointer-events: none;
    box-sizing: border-box;
    opacity: 0.7;
    background-color: #FFFFFF;
  }
}

/* 公告列表样式 */
.announcement-item {
  margin: 10rpx 30rpx;
  background-color: #FFFFFF;
  border-radius: 20rpx;
  box-shadow: 0 4px 16px 0 rgba(0, 3, 72, .05);
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.announcement__content {
  padding: 30rpx;
  display: block;
}

.announcement__header {
  margin-bottom: 10rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}

.announcement__tag {
  padding: 4rpx 20rpx;
  border-radius: 8rpx;
  font-size: 28rpx !important;
  color: #FFFFFF !important;
  display: inline-block !important;
  min-width: 80rpx;
  text-align: center;
  line-height: 40rpx;

  &--important {
    background-color: #FF6B6B !important;
  }

  &--notice {
    background-color: #5D9CEC !important;
  }

  &--activity {
    background-color: #48CFAD !important;
  }
}

.announcement__date {
  font-size: 26rpx;
  margin-left: 20rpx;
}

.announcement__title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  line-height: 1.4;
}

.announcement__desc {
  font-size: 28rpx;
  line-height: 1.6;
}

/* 确保整个页面容器正确显示 */
.template-communique {
  min-height: 100vh;
  background-color: #F8F8F8;
  position: relative;
  z-index: 0;
}

/* 测试文本样式 */
.test-text {
  padding: 20rpx;
  margin: 20rpx;
  background-color: #fff;
  color: #333;
  font-size: 32rpx;
  text-align: center;
  border-radius: 10rpx;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.tag-type {
  font-weight: bold;
}
</style>
